<template>
  <div>
    <div class="app-container">
      <div class="filter-container">
        <el-form :model="tableQuery" ref="tableQuery" :inline="true">
          <#list columnList as column>
              <#if column.columnKey !="PRI">
          <el-form-item label="${column.columnComment}" prop="${column.javaColumnName}">
            <el-input
              v-model="tableQuery.${column.javaColumnName}"
              placeholder="请输入${column.columnComment}"
              clearable
              @keyup.enter.native="handleSearch"
            />
          </el-form-item>
              </#if>
          </#list>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            <el-button type="success" icon="el-icon-plus" @click="handleAdd">添加</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="tableData"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="ID" prop="id" align="center" width="60px">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <#list columnList as column>
        <#if column.columnKey !="PRI">
        <el-table-column label="${column.columnComment}" prop="${column.javaColumnName}" align="center"></el-table-column>
        </#if>
        </#list>
        <#--操作列-->
        <el-table-column
          label="操作"
          class-name="small-padding fixed-width"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="handleUpdate(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页组件-->
      <pagination
        :total="pageTotal"
        :page.sync="tableQuery.pageNum"
        :limit.sync="tableQuery.pageSize"
        @pagination="loadData"
      />
      <!--新增-->
      <${modulePathCamel?cap_first}Add ref="addRef" @loadData="loadData"></${modulePathCamel?cap_first}Add>
      <!--编辑-->
      <${modulePathCamel?cap_first}Update
        ref="updateRef"
        :row-data="rowData"
        @loadData="loadData"
      ></${modulePathCamel?cap_first}Update>
    </div>
  </div>
</template>

<script>
// components
import Pagination from '@/components/Pagination'
import ${modulePathCamel?cap_first}Add from '@/views/${modulePath}/add'
import ${modulePathCamel?cap_first}Update from '@/views/${modulePath}/update'
// sdk
import { ${modulePathCamel}Page, ${modulePathCamel}Delete } from '@/sdk/modules/${modulePath}'
// 接口混入
import dic from '@/mixins/dic'

export default {
  name: 'UserPage',
  mixins: [dic],
  components: { Pagination, ${modulePathCamel?cap_first}Add, ${modulePathCamel?cap_first}Update },
  data() {
    return {
      tableKey: '${modulePathCamel?uncap_first}_page_table',
      listLoading: false,
      tableQuery: {
        <#list columnList as column>
        <#if column.columnKey !="PRI">
        ${column.javaColumnName}: undefined,
        </#if>
        </#list>
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      pageTotal: 0,
      rowData: {}
    }
  },
  created() {
    this.loadData()
    this.dic(['use_flag'])
  },
  methods: {
    loadData() {
      this.listLoading = true
      // 调接口
      ${modulePathCamel}Page(this.tableQuery).then(res => {
        this.tableData = res.data.list
        this.pageTotal = res.data.totals
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    // 触发搜索按钮
    handleSearch() {
      this.loadData()
    },
    // 重置搜索条件
    resetQuery() {
      this.$refs.tableQuery.resetFields()
      this.handleSearch()
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          ${modulePathCamel}Delete({
            id: row.id
          }).then((res) => {
            if (res.code === 'SUCCESS') {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.loadData()
            } else {
              this.$message({
                type: 'error',
                message: res.failMsg
              })
            }
          })
        })
        .catch(() => {
        })
    },
    // 添加操作
    handleAdd() {
      this.$refs.addRef.dialogFormVisible = true
    },
    // 编辑操作
    handleUpdate(index, row) {
      this.rowData = Object.assign({}, row)
      this.$refs.updateRef.dialogFormVisible = true
    }
  }
}
</script>
<#--样式-->
<style scoped>

</style>
